<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo14</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="flag=!flag">1111</button>
            <!-- v-if的特点是 直接删除 或者创建  有较高的切换性能消耗 -->
            <!-- v-show的特点就是加入一个display none 的样式 不删除 
            有较高的初始渲染消耗 -->
            <!-- 如果元素设计到了频繁的切换 最好不要使用v-if 而是使用 v-show 如果元素可能
            永远不被看到 那就使用v-if -->
            <h3 v-if="flag">这是v-if控制</h3>
            <h3 v-show="flag">这是v-show控制</h3>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    flag: true
                },
                methods:{
                    // toggle() {
                    //     this.flag = !this.flag
                    // }
                }
            })
        </script>
    </body>
</html>